import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { Button } from './ui/button';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { t, i18n } = useTranslation();
  const location = useLocation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  const languages = [
    { code: 'zh-CN', name: '中文' },
    { code: 'en-US', name: 'English' },
    { code: 'ja-JP', name: '日本語' },
  ];

  const isActive = (path: string) => location.pathname === path;

  return (
    <div className='min-h-screen bg-background'>
      {/* 导航栏 */}
      <header className='sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
        <div className='container flex h-14 items-center'>
          <div className='mr-4 hidden md:flex'>
            <Link to='/' className='mr-6 flex items-center space-x-2'>
              <span className='hidden font-bold sm:inline-block'>
                Enterprise Template
              </span>
            </Link>
            <nav className='flex items-center space-x-6 text-sm font-medium'>
              <Link
                to='/'
                className={`transition-colors hover:text-foreground/80 ${
                  isActive('/') ? 'text-foreground' : 'text-foreground/60'
                }`}
              >
                {t('nav.home')}
              </Link>
              <Link
                to='/about'
                className={`transition-colors hover:text-foreground/80 ${
                  isActive('/about') ? 'text-foreground' : 'text-foreground/60'
                }`}
              >
                {t('nav.about')}
              </Link>
              <Link
                to='/contact'
                className={`transition-colors hover:text-foreground/80 ${
                  isActive('/contact')
                    ? 'text-foreground'
                    : 'text-foreground/60'
                }`}
              >
                {t('nav.contact')}
              </Link>
            </nav>
          </div>

          {/* 移动端菜单 */}
          <div className='flex flex-1 items-center justify-between space-x-2 md:justify-end'>
            <div className='w-full flex-1 md:w-auto md:flex-none'>
              <nav className='flex md:hidden'>
                <Link
                  to='/'
                  className={`px-3 py-2 text-sm font-medium ${
                    isActive('/') ? 'text-foreground' : 'text-foreground/60'
                  }`}
                >
                  {t('nav.home')}
                </Link>
                <Link
                  to='/about'
                  className={`px-3 py-2 text-sm font-medium ${
                    isActive('/about')
                      ? 'text-foreground'
                      : 'text-foreground/60'
                  }`}
                >
                  {t('nav.about')}
                </Link>
                <Link
                  to='/contact'
                  className={`px-3 py-2 text-sm font-medium ${
                    isActive('/contact')
                      ? 'text-foreground'
                      : 'text-foreground/60'
                  }`}
                >
                  {t('nav.contact')}
                </Link>
              </nav>
            </div>

            {/* 语言切换器 */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant='ghost' size='sm' className='w-9 px-0'>
                  <Globe className='h-4 w-4' />
                  <span className='sr-only'>{t('nav.language')}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align='end'>
                {languages.map(lang => (
                  <DropdownMenuItem
                    key={lang.code}
                    onClick={() => changeLanguage(lang.code)}
                    className={
                      i18n.language === lang.code
                        ? 'bg-accent text-accent-foreground'
                        : ''
                    }
                  >
                    {lang.name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className='container mx-auto px-4 py-8'>{children}</main>

      {/* 页脚 */}
      <footer className='border-t'>
        <div className='container flex h-14 items-center justify-center'>
          <p className='text-sm text-muted-foreground'>
            © 2024 Enterprise Frontend Template. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}
